import { Layout, Menu, Breadcrumb, Dropdown } from 'antd';
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from '@ant-design/icons';
import logo from '@/images/index_logo.png';
import portrait from '@/images/portrait.png';
import styles from './index.less';
import * as React from 'react';
import { Link } from 'umi';

export default (props: any) => {
  const { SubMenu } = Menu;
  const { Header, Content, Footer, Sider } = Layout;

  return (
    <Layout>
      <Header>
        <div className={styles.mainLogo}>
          <span>
            <img alt="首页" src={logo} />
          </span>
          <span>统一认证中心</span>
        </div>

        <div className={styles.mainAuth}>
          <Dropdown
            overlay={
              <Menu>
                <Menu.Item key="1" icon={<UserOutlined />}>
                  个人信息
                </Menu.Item>
                <Menu.Item key="2" icon={<UserOutlined />}>
                  密码修改
                </Menu.Item>
                <Menu.Item key="3" icon={<UserOutlined />}>
                  <Link to="/login">退出登录</Link>
                </Menu.Item>
              </Menu>
            }
          >
            <a>
              <img alt="管理员" src={portrait} />
              <span>系统管理员</span>
            </a>
          </Dropdown>
        </div>
      </Header>
      <Layout>
        <Sider width={200}>
          <Menu
            mode="inline"
            defaultOpenKeys={['sub1']}
            style={{ height: '100%', borderRight: 0 }}
          >
            <SubMenu key="sub1" icon={<UserOutlined />} title="用户管理">
              <Menu.Item key="1">
                <Link to="/userManager">列表管理</Link>
              </Menu.Item>
              <Menu.Item key="2">
                <Link to="/userManagerForClass">列表管理(类组件)</Link>
              </Menu.Item>
              <Menu.Item key="3">
                <Link to="/userManagerForDva">列表管理(Dva全局状态管理)</Link>
              </Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<LaptopOutlined />} title="应用管理">
              <Menu.Item key="5">列表管理</Menu.Item>
              <Menu.Item key="6">资源管理</Menu.Item>
              <Menu.Item key="7">应用授权管理</Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub3"
              icon={<NotificationOutlined />}
              title="会话管理"
            >
              <Menu.Item key="9">列表管理</Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout style={{ padding: '0px 24px 0px 24px' }}>
          <Content className={styles.mainContent}>{props.children}</Content>
          <Footer style={{ textAlign: 'center' }}>
            联系电话：023-67886609 网站备案/许可证号：渝ICP备19014044号
            重庆数宜信信用管理有限公司 版权所有 © 2019
            <br />
            <Link to="/about">关于我们</Link>
          </Footer>
        </Layout>
      </Layout>
    </Layout>
  );
};
